<template>
  <div class="cart">
  <div class="cart-container">
  <van-empty v-show="goodsList.length == 0" description="购物车目前还没有商品" :image="cartEmptyImage">
  <router-link :to="{ name: 'category' }">
  <van-button round type="danger" class="bottom-button">去购物</van-button>
  </router-link>
  </van-empty>
  <!-- 购物车列表 -->
  <div v-for="item in goodsList" :key="item.id" class="list">
  <van-swipe-cell>
  <!-- 复选框 -->
  <div class="checkbox">
  <van-checkbox :name="item" v-model="item.cart.checked" @change="onCheck" checked-color="#f11a27"></van-checkbox>
  </div>
  <!-- 商品图片 -->
  <div class="image">
  <router-link :to="{ name: 'goodsDetail', params: { id: item.id
 } }">
  <van-image width="50" height="50" :src="item.picture" />
  </router-link>
  </div>
  <!-- 商品信息 -->
  <div class="goods-info">
  <div>{{ item.name }}</div>
  <div class="bottom">
  <div class="price"><span>￥</span>{{ item.price }}</div>
  <van-stepper v-model="item.cart.num" theme="round" button-size="22" disable-input />
  </div>
  </div>
  <!-- 左滑删除 -->
  <template #right>
  <van-button aquare icon="delete" type="danger" class="delete-button" @click="onDelete(item)"/>
  </template>
  </van-swipe-cell>
  </div>
  </div>
   <!-- 结算 -->
 <van-submit-bar v-show="goodsList.length" :price="total * 100" button-text="去结算" button-type="primary" @submit="onSubmit" class="settlement">
 <van-checkbox v-model="allChecked" checked-color="#f11a27" @click="onCheckAll">全选</van-checkbox>
 </van-submit-bar>
  </div>
 </template>
<script setup>
import { ref, onMounted , computed} from 'vue'
import { getCartList } from '../api'
import useCart from '../stores/cart'
import cartEmptyImage from '../assets/images/cart_empty.png'
import { showToast } from 'vant'
const { cart ,removeCart} = useCart()
const goodsList = ref([])
const allChecked = ref(false)
onMounted(async() => {
  await loadCart()
  onCheck()
})
// 总金额
const total = computed(() => {
 let sum = 0
 goodsList.value.forEach(item => {
 if (item.cart.checked) {
 sum += item.price * item.cart.num
 }
 })
 return sum
})
// 加载购物车数据
const loadCart = async () => {
 const ids = cart.map(item => item.id)
 goodsList.value = await getCartList({ ids: ids.join(',') })
 goodsList.value.forEach(goods => {
 goods.cart = cart.find(item => goods.id == item.id)
 })
}
// 删除商品
const onDelete = item => {
 const id = item.id
 goodsList.value.forEach((item, index) => {
 if (item.id == id) {
 goodsList.value.splice(index, 1)
 }
 })
 removeCart(id)
}
// 商品都被选中时，全选按钮高亮
const onCheck = () => {
 allChecked.value = goodsList.value.every(el => el.cart.checked)
}
// 去结算
const onSubmit = () => {
 showToast('暂无后续逻辑~')
}
// 全选
const onCheckAll = () => {
 goodsList.value.forEach(el => {
 el.cart.checked = allChecked.value
 })
}
</script>
<style lang="less" scoped>
.cart {
 margin: 0.3rem;
 padding: .05rem 0 3rem 0;
 .cart-container {
 margin-top: 1rem;
 .list {
 position: relative;
 height: 5rem;
 border-radius: 10px;
 box-shadow: 0px 0px 5px #ccc;
 margin-bottom: 1rem;
 .checkbox {
 position: absolute;
 top: 1.7rem;
 left: .2rem;
 }
 .image {
 position: absolute;
 top: .7rem;
 left: 2rem;
 }
 .goods-info {
 height: 5rem;
 display: flex;
 justify-content: space-around;
 flex-direction: column;
 padding: 0 1rem 0 6rem;
 .bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 .price {
 color: #c82519;
 font-size: .45rem;
 }
 }
 }
 .delete-button {
 width: 2rem;
 height: 100%;
 }
 }
 .bottom-button {
 width: 7rem;
 height: 2rem;
 }
 }
 .settlement {
 margin-bottom: -0.1rem;
 }
}
:deep(.van-submit-bar) {
 bottom: 3.5rem;
}
:deep(.van-swipe-cell) {
 width: 100%;
}
</style>